<template>
  <div class="forget-password">
    <div class="header">
      <div class="title">找回密码</div>
      <div>
        已有账号,
        <a href="javascript:;" @click="handleToLogin">马上登录</a>
      </div>
    </div>
    <a-form :form="form">
      <a-form-item>
        <a-input
          size="large"
          type="text"
          v-decorator="[
            'phone',
            { rules: [{ required: true, message: '请输入手机号码!' }] },
          ]"
          placeholder="请输入手机号"
        >
          <a-icon slot="prefix" type="mobile" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          class="code-input"
          size="large"
          type="text"
          v-decorator="[
            'code',
            {
              rules: [
                {
                  required: true,
                  validator: (rule, value, callback) => {
                    if (value === '' || value === undefined) {
                      callback('请输入验证码!')
                    } else {
                      if (value !== verifyCode) {
                        callback('验证码输入错误!')
                      } else {
                        callback()
                      }
                    }
                  }
                }
              ]
            },
          ]"
          placeholder="验证码"
          autocomplete="off"
        >
          <a-icon slot="prefix" type="security-scan" style="color: rgba(0,0,0,.25)" />
        </a-input>
        <span class="code">
          <canvas width="120" height="40" id="identify2" class="verify-code" @click="code"></canvas>
        </span>
      </a-form-item>
      <a-form-item>
        <a-input
          size="large"
          type="text"
          v-decorator="[
            'identify',
            { rules: [{ required: true, message: '请输入短信验证码' }] },
          ]"
          placeholder="请输入短信验证码"
        >
          <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)" />
          <span slot="suffix">
            <a-button
              type="link"
              :class="{ 'not-click': state.smsSendBtn }"
              size="small"
              @click.stop.prevent="handleSendCode"
            >{{ state.codeText }}</a-button>
          </span>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input-password
          size="large"
          type="text"
          v-decorator="[
            'password',
            { rules: [{ required: true, message: '请输入密码!' }] },
          ]"
          placeholder="请输入新密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-input-password
          size="large"
          type="text"
          v-decorator="[
            'qpassword',
            { rules: [{ required: true, message: '请再次输入新密码!' }] },
          ]"
          placeholder="请再次输入新密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          size="large"
          html-type="submit"
          class="login-form-sign"
          :loading="state.loginBtn"
          :disabled="state.loginBtn"
          @click="handleSubmit"
        >找回密码</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { makeCode } from '@/utils/util'
export default {
  name: 'ForgetPassword',
  data () {
    return {
      form: this.$form.createForm(this, { name: 'ForgetPassword' }),
      state: {
        time: 60,
        loginBtn: false,
        smsSendBtn: false,
        codeText: '获取验证码'
      }
    }
  },
  mounted () {
    this.code()
  },
  methods: {
    code () {
      makeCode({ target: '#identify2' }, (res) => {})
    },
    handleToLogin () {
      this.$parent.isForgetPassword = false
    },
    handleSendCode (e) {
      e.preventDefault()
      const { form: { validateFields } } = this

      validateFields(['phone', 'code'], { force: true }, (err, values) => {
        if (!err) {
          const { state } = this
          state.smsSendBtn = true
          const interval = window.setInterval(() => {
            if (state.time-- <= 0) {
              state.time = 60
              state.smsSendBtn = false
              state.codeText = '获取验证码'
              window.clearInterval(interval)
            } else {
              state.codeText = `${state.time}秒后重新发送`
            }
          }, 1000)

          const hide = this.$message.loading('短信验证码正在发送中...', 0)
          setTimeout(hide, 100)
          this.$notification['success']({
            message: '提示',
            description: '短信验证码发送成功，可能会有延后请耐心等待',
            duration: 8
          })
        // getSmsCaptcha({ _MobelNos: form.getFieldValue('phone') }).then(res => {
        //   setTimeout(hide, 100)
        //   this.$notification['success']({
        //     message: '提示',
        //     description: '短信验证码发送成功，可能会有延后请耐心等待',
        //     duration: 8
        //   })
        // }).catch(err => {
        //   setTimeout(hide, 1)
        //   clearInterval(interval)
        //   state.time = 60
        //   state.smsSendBtn = false
        //   this.requestFailed(err)
        // })
        }
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$notification['success']({
            message: '提示',
            description: '找回密码成功',
            duration: 8
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .forget-password {
    .header {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 20px;
      }
    }
    .code-input {
      width: 58%;
    }
    .code {
      float: right;
      cursor: pointer;
    }
    .login-form-sign {
      width: 100%;
    }
  }
</style>
